<style lang="less" scoped>
  @import "select-img.css";
</style>
<template>
  <div>
    <div class="my-upload-list">
      <div class="img-wrap" v-for="item,index in selectedImgs">
        <img :src="getShowUrl(item)">
        <div class="my-upload-list-cover">
          <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
          <Icon v-show="canOp" type="ios-trash-outline" @click.native="delImg(index)"></Icon>
        </div>
      </div>
      <div @click="showImgManager" class="op-add" v-show="canOp&&(imgsLimit>0||imgsLimit===-1)">
        <Icon type="ios-camera" size="20"></Icon>
      </div>
    </div>

    <Modal
	    fullscreen
      class="imgs-manager"
      width="90%"
      :styles="{height: '95%' }"
      v-model="showImgsManager"
      title="选择图片"
      @on-ok="ok">
      <ImgsManager
	      :format="format"
        ref="imgsmanager"
	      :max-size="maxSize"
        :countLimit="imgsLimit"
        @on-checked-imgs="onCheckedImgs"
      ></ImgsManager>
    </Modal>
    <Modal title="预览" v-model="visible">
	    <div v-if="visible">{{GLOBAL.getUrl(tempItme.name)}}</div>
	    <template v-if="visible">
		    <video v-if="tempItme.file_type===typeVideo" :src="GLOBAL.getUrl(tempItme.name)" style="width: 100%" controls="controls"></video>
		    <img v-else :src="tempItme.showUrl"  style="width: 100%">
	    </template>
    </Modal>
  </div>

</template>
<script>
  import {VIDEO,FILEFORMATS,getPre,getFileType} from '@/libs/util'
  import ImgsManager from '../imgs-manager'

  export default {
    name: 'SelectImg',
    components: {
      ImgsManager
    },
    data() {
      return {
        typeVideo:VIDEO,
        fileFormats: FILEFORMATS,
        tempItme:null,
        visible: false,
        showImgsManager: false,
        selectedImgs: [],
        tempSelectedImgs: [],
        imgsLimit: -1//-1为不限制
      };
    },
    props: {
      maxSize: {
        type: Number
      },
      initList: {
        type: Array,
        default: function () {
          return []
        }
      },
      limit: {type: Number, default: -1},
      format: {type: String, default: null},
      flag: {type: Number, default: null},
      canOp: {type: Boolean, default: true},
    },
    model: {
      prop: 'initList',
      event: 'on-selected-imgs'
    },
    methods: {
      getType(file){
        if(typeof (file)==='string'){
          return getFileType(file);
        }
        return  getFileType(file.name);
      },
      handleView(item) {
        if(typeof (item)==='string'){
          this.tempItme = {name:item,file_type:this.getType(item)};
        }else {
          this.tempItme = item;
        }
        this.tempItme.showUrl = getPre(this,item, false);
        this.visible = true;
      },
      getShowUrl(item){
        return getPre(this,item, false);
      },
      delImg(index) {
        this.selectedImgs.splice(index, 1);
        this.checkLimit();
        if (this.flag !== -1) {
          this.$emit('on-del-img', {flag: this.flag, index: index});
        } else {
          this.$emit('on-del-img', index);
        }
      },
      showImgManager() {
        this.showImgsManager = true;
        this.$nextTick(() => {
          this.$refs.imgsmanager.reSet();
        });
      },
      onCheckedImgs(imgs) {
        this.tempSelectedImgs = imgs;
      },
      checkLimit(){
        let vm = this;
        if (vm.limit === 0 || vm.limit === -1) {
          return;
        }
        vm.imgsLimit = vm.limit - vm.selectedImgs.length;
      },
      ok() {
        this.selectedImgs = this.selectedImgs.concat(this.tempSelectedImgs);
        this.checkLimit();
        if (this.flag !== null) {
          this.$emit('on-selected-imgs', {imgs: this.selectedImgs, flag: this.flag});
        } else {
          this.$emit('on-selected-imgs', this.selectedImgs);
        }

        this.showImgs = false;
      }
    },
    watch: {
      selectedImgs: {
        immediate: true,
        handler(fileList) {
          this.checkLimit();
        }
      },
      initList: {
        immediate: true,
        handler(fileList) {
          let vm = this;
          if (vm.initList !== null && vm.initList.length > 0) {
            vm.selectedImgs = vm.initList;
          }
        }
      }
    }
  }
</script>
